<template>
    <div id="exceedBar" ref="exceedBar"></div>
</template>

<script>
// https://www.makeapie.com/editor.html?c=xn_F_GyqL9
import echarts from 'echarts'
import { areaOverStandard } from '@/api/api'
export default {
    props: ['isReady'],
    watch: {
        isReady (newval, oldval) {
            if (newval) {
                this.$nextTick(() => {   //此处使用这个可以等节点渲染后再获取节点
                    // this.getChart()
                    this.areaOverStandard()
                })
            }
        }
    },
    data () {
        return {
            echartElement: null,
        }
    },
    methods: {
        getChart (chartData) {
            // console.log(chartData);
            this.echartElement = echarts.init(this.$el)
            // var xData2 = ["前进街道", "棠下街道", "五山街道", "石牌街道", "员村街道"];
            // var data1 = [55, 50, 32, 24, 16];
            // var data2 = [100, 100, 100, 100, 100];

            // var xData2 = chartData.map(v => { return Object.keys(v) });
            // var data1 = chartData.map(v => { return Object.values(v) });
            // var maxData = this.getMaximumNumer(chartData.sort((a, b) => { return b - a })[0]); // 最大值

            var xData2 = Object.keys(chartData)
            var data1 = Object.values(chartData)

            var maxData = this.getMaximumNumer(data1.sort((a, b) => { return b - a })[0]); // 最大值
            var data2 = []
            xData2.forEach((v, i) => {
                data2.push(maxData)
            })
            var option = {
                title: {
                    // text: '截止统计日期: 2021-01-26',
                    text: `截止统计日期: ${this.$dateFormat('YYYY-mm-dd',(new Date().getTime()-(1000*60*60*24)))}`,
                    subtext: chartData.length==0?"暂无超标消息":"",
                    subtextStyle:{
                        fontSize:16
                    },
                    textStyle: {
                        align: 'left',
                        color: '#ccc',
                        fontSize: 15,
                    },
                    top: '10%',
                    left: '5%',
                },
                tooltip: {
                    trigger: 'item',
                },
                grid: {
                    top: 80,
                    left: 20,
                    right: 20,
                    bottom: 120
                },
                xAxis: {
                    data: xData2,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        },
                        margin: 25, //刻度标签与轴线之间的距离。
                    },

                },
                yAxis: {
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                series: [
                    { // 三个最低下的圆片
                        "name": "",
                        "type": "pictorialBar",
                        "symbolSize": [50, 30],
                        "symbolOffset": [0, 15],
                        "z": 99,
                        show: false,
                        itemStyle: {
                            opacity: 1,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(255, 192, 41,0)' // 0% 处的颜色
                                },
                                {
                                    offset: 0.30,
                                    color: 'rgba(255, 192, 41,0.8)' // 50% 处的颜色
                                },
                                {
                                    offset: 0.50,
                                    color: 'rgba(255, 192, 41,0.98)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255, 192, 41,1)'// 100% 处的颜色
                                }], false),
                        },
                        "data": chartData.length==0?[]:[1, 1, 1, 1, 1]
                    },
                    { // 下半截柱状图
                        name: '2020',
                        type: 'bar',
                        barWidth: 50,
                        barGap: '-100%',
                        z: 2,
                        itemStyle: {//lenged文本
                            opacity: .9,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(255, 192, 41, 0)' // 0% 处的颜色
                                },
                                {
                                    offset: 0.3,
                                    color: 'rgba(255, 192, 41, 0.85)' // 0% 处的颜色
                                },
                                {
                                    offset: 0.7,
                                    color: 'rgba(255, 192, 41, 0.98)' // 0% 处的颜色
                                },
                                {
                                    offset: 0.9,
                                    color: 'rgba(255, 192, 41, 0.98)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255, 192, 41, 1)'// 100% 处的颜色
                                }
                            ], false)
                        },
                        data: data1
                    },
                    { // 顶部圆形
                        "name": "", //头部
                        "type": "pictorialBar",
                        "symbolSize": [50, 30],
                        "symbolOffset": [0, -10],
                        "z": 12,
                        "symbolPosition": "end",
                        itemStyle: {
                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [          // 由中心向四周渐变
                                {
                                    offset: 0,
                                    color: "rgba(22, 63, 122, 0.4)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(22, 63, 122, 1)"
                                }
                            ]),
                            opacity: 1,
                        },
                        "data": data2
                    },
                    { // 中间层的圆形
                        "name": "",
                        "type": "pictorialBar",
                        "symbolSize": [50, 30],
                        "symbolOffset": [0, -15],
                        "z": 12,
                        "label": {
                            "normal": {
                                "show": true,
                                "position": "top",
                                "distance": '10',
                                "textStyle": {
                                    "color": "#fff", //柱子对应数值颜色
                                    "fontSize": 20
                                }
                            },
                        },
                        itemStyle: {
                            opacity: 1,
                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [          // 由中心向四周渐变
                                {
                                    offset: 0,
                                    color: "rgba(255, 192, 41, 0.1)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(255, 192, 41, 1)"
                                }
                            ]),
                        },
                        "symbolPosition": "end",
                        "data": data1
                    },
                    { // 上半部分空心柱体
                        name: '',
                        type: 'bar',
                        barWidth: 50,
                        barGap: '-100%',
                        z: 0,
                        itemStyle: {
                            // color:'rgba(22, 63, 122, 0.3)',
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(22, 63, 122, 0)' // 0% 处的颜色
                                },
                                {
                                    offset: 0.3,
                                    color: 'rgba(22, 63, 122, 0.5)' // 0% 处的颜色
                                },
                                {
                                    offset: 0.5,
                                    color: 'rgba(22, 63, 122, 0.6)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(22, 63, 122, 0)'// 100% 处的颜色
                                }
                            ], false),
                            opacity: .8,
                        },
                        data: data2
                    }
                ]
            };
            this.echartElement.setOption(option);
        },
        areaOverStandard () {
            areaOverStandard()
                .then(res => {
                    this.getChart(res.data.data)
                })
                .catch(err => {
                    console.log(err);
                })
        },
        getMaximumNumer (param) { // 获取最大值
            var param = String(param)
            if (param.length == 1) return 10
            if (param.length == 2) return 100
            return Number(param[0]) * Math.pow(10, param.length - 1) + (Number(param[1]) + 1) * Math.pow(10, param.length - 2)
        }

    },
    mounted () {
        // setTimeout(() => {
        //     this.getChart()
        // }, 3000);
    },
    beforeDestroy () {
        this.echartElement.dispose();
    }
}
</script>

<style lang="less" scoped>
#exceedBar {
    width: 100%;
    height: 30vh;
}
</style>